<template>
  <div class="billFlow">
    <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="true" @goBack="$emit('goBack')" ></jxf-titletip>
    <div class="billInfo mt20">
      <el-row :gutter="10">
        <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">账单编号：<span>{{dataInfo.data.billNo}}</span></el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">账单本金：<span>{{dataInfo.data.credit ? formatMoney.twoDecimal(dataInfo.data.credit) : '0.00'}}</span></el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">剩余还款本金：<span>{{dataInfo.data.principal ? formatMoney.twoDecimal(dataInfo.data.principal) : '0.00'}}</span></el-col>
      </el-row>
      <el-row :gutter="10" class="mt20">
        <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">出单时间：<span>{{dataInfo.data.createTime ? FormatDate.timeFormat(dataInfo.data.createTime) : "N/A"}}</span></el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">所属商户：<span>{{dataInfo.data.enterpriseName}}</span></el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">剩余还款利息：<span>{{dataInfo.data.shouldInterest ? formatMoney.twoDecimal(dataInfo.data.shouldInterest) : '0.00'}}</span></el-col>
      </el-row>
      <el-row :gutter="10" class="mt20">
        <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">&nbsp;</el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6">&nbsp;</el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="6" class="c-red">违约金：<span>{{dataInfo.data.penalty ? formatMoney.twoDecimal(dataInfo.data.penalty) : '0.00'}}</span></el-col>
      </el-row>
    </div>
    <el-card class="box-card mt20 jxf-table">
      <div slot="header">
        <span><i class="el-icon-date"></i> 流水记录</span>
      </div>
      <div class="dataArea" v-for="(item, index) in dataInfo.recording" :key="index">
        <el-row :gutter="10" class="dataHeader" v-if="item.breakState !== 1">
          <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4">账单月份：{{item.mouth}}</el-col>
          <el-col :xs="9" :sm="9" :md="5" :lg="5" :xl="5">本月结余本金：￥{{item.money ? formatMoney.twoDecimal(item.money) : '0.00'}}</el-col>
          <el-col :xs="9" :sm="9" :md="5" :lg="5" :xl="5">本月结余利息：{{item.applicableRatio ? formatMoney.twoDecimal(item.applicableRatio) : '0.00'}}</el-col>
          <el-col :xs="9" :sm="9" :md="5" :lg="5" :xl="5">本月适用利率：{{item.rate}}</el-col>
          <el-col :xs="9" :sm="9" :md="5" :lg="5" :xl="5" class="red">应还款总额：￥{{item.surplusTotal ? formatMoney.twoDecimal(item.surplusTotal) : '0.00'}}</el-col>
        </el-row>
        <el-row :gutter="10" class="dataHeader" v-else>
          <el-col :span="24" style="font-size: 16px; font-weight: bolder">
            违约还款记录
          </el-col>
        </el-row>
        <jxf-table :table="item.dataTable">
          <template slot="repayTime" slot-scope="money">
            {{money.row.repayTime ? FormatDate.timeFormat(money.row.repayTime) : "N/A"}}
          </template>
          <template slot="repayCredit" slot-scope="money">
            {{money.row.repayCredit || money.row.repayCredit == 0 ? '￥' + formatMoney.twoDecimal(money.row.repayCredit) : "N/A"}}
          </template>
          <template slot="repayPrincipal" slot-scope="money">
            {{money.row.repayPrincipal || money.row.repayPrincipal == 0 ? '￥' + formatMoney.twoDecimal(money.row.repayPrincipal) : "N/A"}}
          </template>
          <template slot="repayInterest" slot-scope="money">
            {{money.row.repayInterest || money.row.repayInterest == 0 ? '￥' + formatMoney.twoDecimal(money.row.repayInterest) : "N/A"}}
          </template>
          <template slot="repayPenalty" slot-scope="money">
            {{money.row.repayPenalty || money.row.repayPenalty == 0 ? '￥' + formatMoney.twoDecimal(money.row.repayPenalty) : "￥0.00"}}
          </template>
        </jxf-table>
      </div>
    </el-card>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
  export default {
    name: "BillFlow",
    props: {
      dataInfo: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        title: "账单流水",
        formatMoney: formatMoney,
        FormatDate: FormatDate
      }
    },
    methods: {

    },
    watch: {

    }
  }
</script>

<style lang="scss">
  .billFlow {
    .btnsArea {
      text-align: right;
    }
    .billInfo {
      padding: 20px 10px;
      font-size: 14px;
      color: #666;
      border-radius: 2px;
      background: #f3f3f3;
    }
    .dataArea {
      margin-bottom: 20px;
      .dataHeader{
        padding: 15px 20px;
        background: #e4e4e4;
        color: #666;
        font-size: 14px;
      }
    }
  }
</style>
